import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:znmm/UI/ProductPages/view/product_all_view.dart';

class ImageGridView extends StatefulWidget {
  const ImageGridView({
    Key? key,
  }) : super(key: key);

  @override
  _ImageGridViewState createState() => _ImageGridViewState();
}

class _ImageGridViewState extends State<ImageGridView> {
  late List<ImageCard> displayedCards;

  @override
  void initState() {
    super.initState();

    final imageCards = [
      ImageCard(
        imageUrl: 'https://www.glassesin.com/image/home/c1.jpg',
        title: 'All under \$16',
        subtitle: 'Grab Now!',
        buttonText: 'GRAB NOW',
        onPressed: () {
          print('Image 1 Button Pressed');
        },
      ),
      ImageCard(
        imageUrl: 'https://www.glassesin.com/image/home/c2.png',
        title: 'Clearance',
        subtitle: 'Last Chance!',
        buttonText: 'GRAB NOW',
        onPressed: () {
          print('Image 2 Button Pressed');
        },
      ),
      ImageCard(
        imageUrl: 'https://www.glassesin.com/image/home/h2.webp',
        title: 'Choose Glasses',
        subtitle: 'Find Your Style!',
        buttonText: 'VIEW MORE',
        onPressed: () {
          print('Image 3 Button Pressed');
        },
      ),
      ImageCard(
        imageUrl: 'https://www.glassesin.com/image/home/h1.webp',
        title: 'Face Shape',
        subtitle: 'Perfect Fit!',
        buttonText: 'VIEW MORE',
        onPressed: () {
          print('Image 4 Button Pressed');
        },
      ),
    ];

    displayedCards = imageCards;
  }

  void addImageCard(ImageCard card) {
    setState(() {
      displayedCards.add(card);
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
        height: 300, // 设置固定高度
        child: GridView.builder(
          padding: const EdgeInsets.all(10.0),
          physics: const NeverScrollableScrollPhysics(), // 禁止滑动
          shrinkWrap: true, // 允许 GridView 的高度根据内容适配
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // 每行展示的图片数量
            crossAxisSpacing: 5,
            mainAxisSpacing: 10,
            childAspectRatio: 3 / 2, // 长方形比例（宽高比为 3:2）
          ),
          itemCount: displayedCards.length,
          itemBuilder: (context, index) {
            final card = displayedCards[index];
            return GestureDetector(
              onTap: () {
                Get.to(const ProductAllView());
              },
              child: _buildImageCard(card),
            );
          },
        ));
  }

  Widget _buildImageCard(ImageCard card) {
    return Stack(
      children: [
        SizedBox(
          height: double.infinity,
          width: double.infinity,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10), // 圆角
            child: Image.network(
              card.imageUrl,
              width: double.infinity,
              height: double.infinity,
              fit: BoxFit.fill,
            ),
          ),
        ),
        // Container(
        //   decoration: BoxDecoration(
        //     borderRadius: BorderRadius.circular(10),
        //     gradient: LinearGradient(
        //       colors: [
        //         Colors.black.withOpacity(0.6),
        //         Colors.transparent,
        //       ],
        //       begin: Alignment.bottomCenter,
        //       end: Alignment.topCenter,
        //     ),
        //   ),
        // ),
        // Positioned(
        //   bottom: 20,
        //   left: 20,
        //   child: Column(
        //     crossAxisAlignment: CrossAxisAlignment.start,
        //     children: [
        //       Text(
        //         card.title,
        //         style: const TextStyle(
        //           color: Colors.white,
        //           fontSize: 18,
        //           fontWeight: FontWeight.bold,
        //         ),
        //       ),
        //       const SizedBox(height: 5),
        //       Text(
        //         card.subtitle,
        //         style: const TextStyle(
        //           color: Colors.white70,
        //           fontSize: 14,
        //         ),
        //       ),
        //       const SizedBox(height: 10),
        //       ElevatedButton(
        //         onPressed: card.onPressed,
        //         style: ElevatedButton.styleFrom(
        //           backgroundColor: Colors.redAccent,
        //           padding:
        //               const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        //           shape: RoundedRectangleBorder(
        //             borderRadius: BorderRadius.circular(20),
        //           ),
        //         ),
        //         child: Text(
        //           card.buttonText,
        //           style: const TextStyle(
        //             color: Colors.white,
        //           ),
        //         ),
        //       ),
        //     ],
        //   ),
        // ),
      ],
    );
  }
}

class ImageCard {
  final String imageUrl;
  final String title;
  final String subtitle;
  final String buttonText;
  final VoidCallback onPressed;

  ImageCard({
    required this.imageUrl,
    required this.title,
    required this.subtitle,
    required this.buttonText,
    required this.onPressed,
  });
}
